<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组态FS下载调试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #app {
            overflow: hidden;
            display: flex;
            width: 100%;
            height: 100%;
        }

        .left {
            width: 400px;
            flex-shrink: 0;
            border-right: 1px solid #ccc;
            height: 100vh;
            padding: 15px;
            box-sizing: border-box;
        }

        .right {
            flex: 1;
            box-sizing: border-box;
            overflow: auto;
        }

        .form-row {
            display: flex;
            margin: 5px 0;
        }

        .label {
            width: 100px;
        }

        .item {

        }

        input {
            height: 25px;
        }

        pre {
            font-family: Arial, sans-serif; /* 更改字体 */
            font-size: 14px; /* 调整字体大小 */
            line-height: 1.5; /* 增加行高 */
            white-space: pre-wrap; /* 自动换行，保留空格 */
            word-wrap: break-word; /* 长单词自动换行 */
            padding: 15px 25px; /* 添加内边距 */
            background-color: #f9f9f9; /* 背景颜色 */
            border: 1px solid #ddd; /* 边框 */
            border-radius: 5px; /* 圆角 */
        }
    </style>
</head>
<body>
<script src="../src/js/vue-3.5.min.js"></script>
<script src="../src/js/axios.min.js"></script>
<!--<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>-->
<div id="app">
    <div class="left">
        <div class="form-box">
            <div class="form-row" v-for="(item,index) in list1" :key="index">
                <div class="label">{{item.module_type}}</div>
                <div class="item">
                    <input type="number" v-model="item.num" placeholder="请输入内容">
                </div>
            </div>
            <div class="form-row">
                <div>
                    <button type="button" @click="module_download">模块下载</button>
                    <button type="button" @click="test">接口测试</button>
                </div>
            </div>
            <div class="form-row" v-for="(item,index) in list2" :key="index">
                <div class="label">{{item.module_type}}</div>
                <div class="item">
                    <input type="number" v-model="item.num" placeholder="请输入内容">
                </div>
            </div>
            <div class="form-row">
                <div>
                    <button type="button" @click="model_download">模型下载</button>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <pre>{{json_content}}</pre>
    </div>
</div>
<script>
    // 创建 Vue 3 应用实例
    const {createApp, ref,reactive, onMounted} = Vue;
    createApp({
        setup() {
            const json_content = ref("")
            const base = reactive({
                api_url: "",
                fs_id: 0,
                token: "",
            })
            const getUrlParam = (key) => {
                const params = new URLSearchParams(window.location.search);
                return params.get(key);
            }

            const list1 = ref([
                {module_type: "AI", num: 3},
                {module_type: "DI", num: 4},
                {module_type: "AQ", num: 2},
                {module_type: "DQ", num: 4},
                {module_type: "Other", num: 2},
            ]);

            const list2 = ref([
                {module_type: "泵组电磁阀", num: 2},
                {module_type: "增压泵电磁阀", num: 2},
                {module_type: "电调阀", num: 2},
                {module_type: "压力电磁阀", num: 3},
                {module_type: "电源控制", num: 2},
                {module_type: "电源状态", num: 2},
                {module_type: "模态采集", num: 2},
                {module_type: "故障诊断", num: 2},
            ]);

            const module_download_api = (list) => {
                if(list.length === 0) {
                    json_content.value = jsonFormat({
                        msg: "全部模块下载完成",
                    })
                    return
                }
                let param = list.shift()
                axios.post(base.api_url + '/admin/fs/module_download', param,{
                    headers: {
                        'Authorization': base.token, // 添加认证头
                    }
                }).then(res => {
                    // console.log("res",res.data)
                    if (res.data.code === 0) {
                        json_content.value = jsonFormat({
                            module_type: param.module_type,
                            module_number: param.module_number,
                            message: "下载成功",
                        })
                        setTimeout(() => {
                            module_download_api(list)
                        }, 500)
                    } else {
                        json_content.value = jsonFormat(res.data)
                    }
                }).catch(err => {
                    console.log("module_download",err)
                })
            }

            const model_download_api = (list) => {
                if(list.length === 0) {
                    json_content.value = jsonFormat({
                        msg: "全部模型下载完成",
                    })
                    return
                }
                let param = list.shift()
                axios.post(base.api_url + '/admin/fs/model_download', param,{
                    headers: {
                        'Authorization': base.token, // 添加认证头
                    }
                }).then(res => {
                    // console.log("res",res.data)
                    if (res.data.code === 0) {
                        json_content.value = jsonFormat({
                            module_type: param.module_type,
                            module_number: param.module_number,
                            message: "下载成功",
                        })
                        setTimeout(() => {
                            model_download_api(list)
                        }, 500)
                    } else {
                        json_content.value = jsonFormat(res.data)
                    }
                }).catch(err => {
                    console.log("model_download",err)
                })
            }

            const jsonFormat = (obj) => {
                return JSON.stringify(obj, null, 4)
            }

            const module_download = () => {
                console.log("模块下载开始 --- ")
                let param_list = []
                for(let item of list1.value) {
                    if(item.num > 0) {
                        for (let i = 1; i <= item.num; i++) {
                            param_list.push({
                                fs_id: base.fs_id,
                                module_type: item.module_type,
                                module_number: i,
                            })
                        }
                    }
                }
                console.log("param_list",param_list)
                module_download_api(param_list)
            }

            const model_download = () => {
                console.log("模型下载开始 --- ")
                let param_list = []
                for(let item of list2.value) {
                    if(item.num > 0) {
                        for (let i = 1; i <= item.num; i++) {
                            param_list.push({
                                fs_id: base.fs_id,
                                module_type: item.module_type,
                                module_number: i,
                            })
                        }
                    }
                }
                console.log("param_list",param_list)
                model_download_api(param_list)
            }

            const padNumber = (num) => {
                return num < 10 ? '0' + num : String(num);
            }

            const test = () => {
                axios.post(base.api_url + '/admin/alert/list', {},{
                    headers: {
                        'Authorization': base.token, // 添加认证头
                    }
                }).then(res => {
                    console.log("alert/list res",res.data)
                    if(res.status === 200) {
                        json_content.value = jsonFormat(res.data)
                    }else {
                        json_content.value = jsonFormat(res)
                    }
                }).catch(err => {
                    console.log("test error",err)
                    json_content.value = jsonFormat({
                        err : err,
                    })
                })
            }

            onMounted(() => {
                let fs_id = getUrlParam("fs_id")
                let api_url = getUrlParam("api_url")
                let token = getUrlParam("token")
                if (!fs_id || !api_url || !token) {
                    alert("请填写参数 fs_id,api_url,token")
                }
                base.fs_id = fs_id ? parseInt(fs_id) : 0
                base.api_url = fs_id ? api_url : ""
                base.token = token ? token : ""
                console.log("fs_id",base.fs_id)
                console.log("api_url",base.api_url)
                console.log("token",base.token)
            })

            return {
                list1,
                list2,
                json_content,
                module_download,
                model_download,
                test,
            };
        }
    }).mount('#app');
</script>
</body>
</html>